<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
			<!-- 会以字符串的方式输出 -->
			<p>Using mustaches: {{rawHtml}}</p>
			<!-- 会以html代码的方式输出 -->
			<p v-html="rawHtml"></p>
			<!-- 绑定元素属性的值 -->
			<div v-bind:class="color">test...</div>
			
			<!-- 使用JavaScript表达式 -->
			<!-- 支持数学运算 -->
			<p>{{ number + 1 }}</p>
			<!-- 三元运算 -->
			<p>{{ ok ? 'YES' : 'NO' }}</p>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "hi vue",
					rawHtml: "<span style='color: red'>this is should be red</span>",
					color: 'red',
					number: 10,
					ok: true
				}

			});
		</script>
		<style type="text/css">
			.red {
				color: red
			}

			;
		</style>
	</body>
</html>
